<template>
    <div class="commentParent">
        <div v-for="(item,index) in commentList" :key="index">
            <div class="commentItem">
                <div class="userImg">
                    <img v-if="item.user && item.user.img" :src="item.user.img" alt/>
                    <img v-else src="src/assets/default_img.jpg" alt="">
                </div>
                <div class="commentContent">
                    <p>
                        <span v-if="item.user">{{item.user.name}}</span>
                        <span v-else>此用户无姓名</span>
                        <span>{{item.comment_date}}</span>
                    </p>
                    <div>
                        {{item.comment_content}}
                        <span class="publishs" @click="publishClick(item.id,item.uuid)">回复</span>
                    </div>
                </div>
            </div>
            <div style="padding-left:8.333vw;">
                <comment-item @PostPublish="publishClick" :commentChild="item.children"></comment-item>
            </div>
        </div>
    </div>
</template>

<script>
    import commentItem from "@/components/UserComponents/commentItem";

    export default {
        components: {commentItem},
        name: "Comment",
        data() {
            return {
                commentList: null,
                itemInfo: ""
            }
        },
        methods: {
            publishClick(id, uuid) {
                this.$emit('publishClick', id, uuid)
            },
            loadComment() {
                this.itemInfo = JSON.parse(this.$route.query.item)
                this.$http.get("/getArticleComment", {params: {articleId: this.itemInfo.id}}).then((res) => {
                    if (res.data.data) {
                        this.$emit('lengthselect', res.data.data.length)
                    }
                    this.commentList = this.processComment(res.data.data);
                })
            },
            processComment(data) {

                function fn(temp) {
                    let arr = [];

                    for (let i = 0; i < data.length; i++) {
                        if (data[i].parent_id == temp) {
                            arr.push(data[i])
                            data[i].children = fn(data[i].id)
                        }
                    }
                    return arr;
                }

                return fn(null);
            }
        },
        mounted() {
            this.loadComment();
        }
    }
</script>

<style lang="less" scoped>
    .commentParent {
        padding: 2.778vw 2.778vw;

        > div {
            border-bottom: 0.278vw solid #e7e7e7;
        }

        .commentItem {
            display: flex;
            margin: 2.778vw 0;

            .userImg {
                margin-right: 2.778vw;

                img {
                    width: 9.722vw;
                    height: 9.722vw;
                }
            }

            .commentContent {
                flex: 1;
                position: relative;

                p {
                    font-size: 3.611vw;
                    color: #555;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 1.389vw;
                }

                div {
                    font-size: 3.611vw;
                }

                .publishs {
                    position: absolute;
                    right: 0;
                    color: red;
                }
            }
        }
    }

</style>